
<template>
<!-- 美团对账正常单    美团对账异常单 -->
    <div class="storeInfo">
        <div class="head">
            <el-form class="headForm">
                <el-form-item >
                    <el-date-picker
                        v-model="form.month"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>


                <el-button type="danger" @click="search" >搜索</el-button> 
                <el-button type="danger" @click="exportFn" >导出</el-button> 
                <!-- <el-button class="btnTxt">结算金额合计:121231545元</el-button>  -->
                
            </el-form>
        </div> 
        <!-- table -->

        <div class="headPrice tabContainer">
            <!-- 						 -->
            <el-table :data="statistics" border style="width: 100%">
                <el-table-column prop="type_name" label="数据范围" fixed></el-table-column>
                <el-table-column prop="recharge_price" label="月充值" fixed></el-table-column>
                <el-table-column prop="consumer_price" label="月消费" fixed></el-table-column>
                <el-table-column prop="balance_price" label="月余额" fixed></el-table-column>
                <el-table-column prop="total_recharge_price" label="累计充值" fixed></el-table-column>
                <el-table-column prop="total_consumer_price" label="累计消费" fixed></el-table-column>
                <el-table-column prop="total_balance_price" label="累计余额" fixed></el-table-column>
                
            </el-table>
        </div>

        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!-- 							 -->
                <el-table-column prop="month" label="月份" width="200" fixed> </el-table-column>
                <el-table-column prop="title" label="门店"></el-table-column>
                <el-table-column prop="recharge_price" label="充值金额" ></el-table-column>
                <el-table-column prop="consumer_price" label="消费金额" ></el-table-column>

                <el-table-column prop="balance_price" label="余额"></el-table-column>
                <el-table-column prop="total_recharge_price" label="累计充值金额"></el-table-column>

                <el-table-column prop="total_consumer_price" label="累计消费金额"></el-table-column>               
                
                <el-table-column prop="total_balance_price" label="累计余额" ></el-table-column>


            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <!-- 分页部分 -->
        <!-- <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination> -->
        <!-- 编辑弹框，在status!=1时编辑的按钮才会显示 -->
  

    </div>
  
</template>

<style>
.setWidth{width:140px !important}
</style>
<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
export default {
    data () {
    return {
        
        form:{
            // page:1,
            // size:20,
            month: abc.getpremonth()
        },
        tableData:[],
        statistics:[],
        editW:"120px",//label的宽度
 
    }
  }, 
   mounted(){
        let that = this;
        that.getList();
  },
  methods:{
    search(){
        let that = this;
        //搜索有问题，搜索2019-03数据和2019-04数据是一样的；-error
        that.getList()
    },
    // changePage(val){
    //     var that = this;
    //     that.pageNum = val;
    //     that.form.page = val;
    //     that.getList()
    // },
    exportFn(){
        let that = this;
        window.location.href = abc.hostUrl + potUrl.vipexport + abc.getSession('param') + '&month=' + that.form.date
    },
    getList(){
        let that = this;
        abc.get(that,potUrl.vipstatistics,that.form,(res)=>{
            that.tableData=res.data.list;
            that.statistics = res.data.statistics
            // that.total = res.data.total;
        })//列表
    }
  }
}
</script>
